<template>
    <view class="team">
        <u-navbar
            :background="background"
            title="我的团队"
            style="position: fixed; z-index: 999"
            :border-bottom="false"
        ></u-navbar>
        <view class="team_box">
            <image
                :src="BaseUrl + '/static/common/td_bg.png'"
                mode="scaleToFill"
            />
            <view class="team_content">
                <view class="card left_box">
                    <view class="top">
                        <view class="title"> 团队总人数（人） </view>
                        <view class="num">
                            {{
                                temData.userconut_all
                                    ? temData.userconut_all
                                    : 0
                            }}
                        </view>
                    </view>
                    <view class="bottom">
                        <view class="left">
                            <view class="subT">一级成员</view>
                            <view class="num">
                                {{
                                    temData.userconut1 ? temData.userconut1 : 0
                                }}
                            </view>
                        </view>
                        <view class="right">
                            <view class="subT">二级成员</view>
                            <view class="num">
                                {{
                                    temData.userconut2 ? temData.userconut2 : 0
                                }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="card right_box">
                    <view class="top">
                        <view class="title"> 团队分销商人数（人） </view>
                        <view class="num">
                            {{
                                temData.agentconut_all
                                    ? temData.agentconut_all
                                    : 0
                            }}
                        </view>
                    </view>
                    <view class="bottom">
                        <view class="left">
                            <view class="subT">一级分销商</view>
                            <view class="num">
                                {{ temData.agentconut1 || 0 }}
                            </view>
                        </view>
                        <view class="right">
                            <view class="subT">二级分销商</view>
                            <view class="num">
                                {{ temData.agentconut2 || 0 }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="list">
            <view class="item" v-for="item in list" :key="item">
                <image :src="BaseUrl + item.avatar" mode="scaleToFill" />
                <view class="info">
                    <view class="name">
                        {{ item.nickname }}
                    </view>
                    <view class="date">
                        {{ initTime(item.share_time) }}
                    </view>
                </view>
            </view>
            <u-empty
                text="暂无数据"
                v-if="list.length == 0"
                mode="list"
            ></u-empty>
        </view>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl: BaseUrl,
            background: {
                backgroundColor: "rgba(255, 255, 255, 0)",
            },
            list: [],
            temData: {},
        };
    },

    onShow() {
        this.getData();
        this.getTeamList();
    },

    methods: {
        initTime(time) {
            var date = new Date(time * 1000);
            var Y = date.getFullYear();
            var M = date.getMonth() + 1;
            var D = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            if (s < 10) {
                s = "0" + s;
            }
            if (m < 10) {
                m = "0" + m;
            }
            if (h < 10) {
                h = "0" + h;
            }
            if (D < 10) {
                D = "0" + D;
            }
            if (M < 10) {
                M = "0" + M;
            }
            return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
        },
        // 绑定推荐人
        async bind() {
            await uni.request({
                url: BaseUrl + "/api/wanlshop.partner/bind",
                method: "GET",
                header: {
                    token: uni.getStorageSync("token"),
                },
                data: {
                    referrer_id: 4,
                },
                success: (res) => {
                    console.log(res.data, "绑定推荐人");
                },
            });
        },
        // 获取团队列表
        async getTeamList() {
            await this.$request
                .get("api/wanlshop.partner/userlist")
                .then((res) => {
                    this.list = res.data.data.data;
                    console.log(this.list, "团队列表");
                });
        },
        // 获取数据
        async getData() {
            await uni.request({
                url: BaseUrl + "/api/wanlshop.partner/index",
                method: "GET",
                header: {
                    token: uni.getStorageSync("token"),
                },
                success: (res) => {
                    this.temData = res.data.data;
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.team {
    .team_box {
        width: 100%;
        height: 34vh;
        position: relative;
        image {
            width: 100%;
            height: 100%;
        }
        .team_content {
            position: absolute;
            top: 200rpx;
            display: flex;
            width: 100%;
            padding: 0 10rpx;
            box-sizing: border-box;
            .card {
                background: white;
                border-radius: 16rpx;
                padding: 24rpx;
            }
            .left_box,
            .right_box {
                width: calc(50% - 5rpx);
                margin: 0 10rpx;
                .top {
                    .title {
                        font-size: 26rpx;
                        color: #888888;
                    }
                    .num {
                        font-size: 42rpx;
                        color: #057748;
                        line-height: 1.5em;
                        font-weight: bold;
                    }
                }
                .bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20rpx;
                    .subT {
                        font-size: 26rpx;
                        color: #888888;
                    }
                    .num {
                        font-size: 32rpx;
                        color: #057748;
                        line-height: 1.8em;
                        font-weight: bold;
                    }
                }
            }
        }
    }
    .list {
        width: 100%;
        position: relative;
        top: -80rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        .item {
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 1px solid #eeeeee;
            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
            .info {
                .name {
                    font-size: 30rpx;
                    color: #333333;
                    font-weight: bold;
                }
                .date {
                    font-size: 26rpx;
                    color: #888888;
                    margin-top: 10rpx;
                }
            }
        }
        .item:last-child {
            border-bottom: none;
        }
    }
}
</style>